<template>
<div class="completion-edit">
  <el-input v-model="title" placeholder="请输入题目内容" type="textarea" autosize @change="changeTitle"></el-input>
  <el-checkbox v-model="checked" class="isness" @change="changeNess">必答</el-checkbox>

  <div>
    <el-checkbox :model-value="this.isCmpAviSet" class="isness" @change="this.isCmpAviSet = !this.isCmpAviSet" >设定本题作答名额</el-checkbox>
  </div>
  <el-input-number
      :disabled="!this.isCmpAviSet"
      v-model="this.cmpAviNum"
      size="mini"
      @change="cmpAviNumChange"
      :min="1"
      label="描述文字"
      style="margin-top: 10px; margin-bottom: 10px">
  </el-input-number>

  <el-button class="finish-edit" @click="finish">完成编辑</el-button>
</div>
  
</template>

<script>
export default {
  name:'CompletionEdit',
  data(){
   return {
     isCmpAviSet: this.cmpavinum!=null,
     cmpAviNum: this.cmpavinum,
   }
  },
  computed: {
  },
  props: ['title', 'checked', 'cmpavinum'],
  methods: {
    changeTitle() {
      this.$emit('changeTitle',this.title)
    },

    changeNess() {
      this.$emit('changeNess', this.checked)
    },

    finish() {
      this.$emit('finish')
    },

    cmpAviNumChange() {
      console.log(this.cmpAviNum);
      this.$emit('cmpavinumchange', this.cmpAviNum)
    },
  }
}
</script>

<style scoped src='assets/css/editcss/completionEdit.css'>
  /* @import url('../../css/completionEdit.css'); */
</style>
